<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- element-ui 2.15.14 -->
    <link rel="stylesheet" href="css/index.css">

    <style>
        .el-card__header {
            padding: 5px 20px !important;
        }

        .addTemplate-card-header {
            /*padding: 0 15px;*/
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .addTemplate-left {
            display: flex;
            flex-direction: column; /* 垂直排列子元素 */
            align-items: flex-start;
        }

        .addTemplate-close {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-weight: 700;
            line-height: 20px;
            text-align: left;
        }
        .addTemplate-close-step2-margin {
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-weight: 700;
            line-height: 20px;
            text-align: left;
        }

        .addTemplate-note {
            font-weight: 400;
            line-height: 18px;
            color: #FA8C15;
            font-size: 12px;
            margin-top: 5px;
            display: flex;
            align-items: center;
            margin-left: 27px;
        }

        .progress-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            /*width: 600px;*/
            margin: 15px 0;
        }

        .progress-container .step {
            display: flex;
            align-items: center;
        }

        .progress-container .circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgb(242, 243, 245);
            color: rgba(3, 3, 3, 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            margin-right: 10px; /* 调整文字和圆形之间的间距 */
        }

        .progress-container .circle-done {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid rgb(22, 93, 255);
            color: rgb(22, 93, 255);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            margin-right: 10px; /* 调整文字和圆形之间的间距 */
        }

        .progress-container .circle-ing {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #165DFF;
            color: rgb(255, 255, 255);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            margin-right: 10px; /* 调整文字和圆形之间的间距 */
        }

        .progress-container .text {
            font-size: 14px;
            color: rgba(3, 3, 3, 0.4);
        }
        .progress-container .text-done {
            font-size: 14px;
            color: rgba(3, 3, 3, 0.9);
        }
        .progress-container .text-ing {
            font-size: 14px;
            color: rgba(22, 93, 255, 0.9);
        }

        .progress-container .separator {
            width: 130px;
            height: 2px;
            background-color: gray;
            margin: 0 10px; /* 调整间距确保分隔符不紧贴其他元素 */
        }
        .progress-container .separator-done {
            width: 130px;
            height: 2px;
            background-color: rgb(22, 93, 255);
            margin: 0 10px; /* 调整间距确保分隔符不紧贴其他元素 */
        }

        .el-card__body, .el-main {
            padding: 2px !important;
        }
        .stepOneWrapper {
            padding: 20px;
        }

        .contract-file-aside-left {
            overflow-y: hidden;
        }
        .contract-file-name-list {
            height: 20%;
            border-bottom: 1px solid #EBEEF5;
        }
        .contract-file-name-list-title {
            height: 20%;
            display: flex;
            align-items: center;
            font-size: 16px;
            padding-left: 20px;
        }
        .contract-file-name-list-content {
            height: 80%;
            max-height: 80%;
            font-size: 14px;
            overflow-y: auto;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }
        .contract-file-name-list-content::-webkit-scrollbar {
            display: none;
            width: 8px;
        }
        .contract-file-name-list-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        .contract-file-name-list-content::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }
        .contract-file-name-list-content::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .contract-file-name-list-content-name {
            height: 25%;
            display: flex;
            align-items: center;
            padding-left: 30px;
        }
        .contract-file-name-list-content-name:hover {
            cursor: pointer;
            background-color: #EBF2FD;
            color: #0052D9;
        }
        .contract-file-name-list-content-name-active {
            height: 25%;
            display: flex;
            align-items: center;
            padding-left: 30px;
            cursor: pointer;
            background-color: #EBF2FD;
            color: #0052D9;
        }

        .contract-file-small-list {
            height: 80%;
            /*background-color: #66b1ff;*/
        }

        .contract-file-small-list-title {
            height: 5%;
            font-size: 14px;
            padding-left: 20px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            /*background-color: #9C27B0;*/
        }

        .contract-file-small-list-content {
            height: 95%;
            /*background-color: #666666;*/
            overflow-y: auto;
            overflow-x: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        .contract-file-small-list-content::-webkit-scrollbar {
            display: none;
            width: 8px;
        }

        .contract-file-small-list-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .contract-file-small-list-content::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        .contract-file-small-list-content::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .contract-file-small-list-content-item-wrapper {
            height: 40%;
            margin-top: 10px;
            margin-bottom: 5px;
            /*background-color: #e1f3d8;*/
        }

        .contract-file-small-list-content-item {
            display: flex;
            height: 90%;
        }

        .contract-file-small-list-content-item-left {
            width: 60%;
            margin-left: 20px;
            border: 1px solid rgba(3, 3, 3, 0.4);
            /*background-color: #e6a23c;*/
        }
        .contract-file-small-list-content-item-left-active {
            width: 60%;
            margin-left: 20px;
            border: 1px solid rgba(22, 93, 255, 0.9);
            /*background-color: #e6a23c;*/
        }

        .contract-file-small-list-content-item-right {
            width: 40%;
            margin-right: 10px;
            /*background-color: #ff4d51;*/
            overflow-y: auto;
            padding-right: 3px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        .contract-file-small-list-content-item-right::-webkit-scrollbar {
            display: none;
            width: 8px;
        }

        .contract-file-small-list-content-item-right::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .contract-file-small-list-content-item-right::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        .contract-file-small-list-content-item-right::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .contract-file-small-list-content-item-right-item {
            height: 18%;
            font-size: 12px;
            display: flex;
            align-items: center;
            color: white;
            background-color: rgb(222, 229, 247);
            margin-bottom: 5%;
            border-radius: 0 20px 20px 0;
            position: relative; /* 相对定位，为了定位关闭按钮 */
        }
        .contract-file-small-list-content-item-right-item-active {
            height: 18%;
            font-size: 12px;
            display: flex;
            align-items: center;
            color: #165DFF;
            background-color: #dce4f4;
            margin-bottom: 5%;
            border-radius: 0 20px 20px 0;
            position: relative; /* 相对定位，为了定位关闭按钮 */
        }

        .contract-file-small-list-content-item-right-item-close {
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
        }

        .contract-file-small-list-content-item-right-item-close-icon path {
            fill: rgba(0, 0, 0, 0.5); /* 改变内部填充颜色 */
        }
        /* 悬停父元素，改变子元素的样式 */
        .contract-file-small-list-content-item-right-item-close:hover  .contract-file-small-list-content-item-right-item-close-icon path {
            fill: red; /* 改变内部填充颜色 */
        }


        .contract-file-small-list-content-item-page {
            height: 10%;
            width: 100%;
            margin-left: 30%;
            display: flex;
            align-items: center;
            text-align: center;
            font-size: 14px;
            /*background-color: #b3e19d;*/
        }
        .contract-file-small-list-content-item-page-active {
            height: 10%;
            width: 100%;
            margin-left: 30%;
            display: flex;
            align-items: center;
            text-align: center;
            font-size: 14px;
            color: #165DFF;
        }

        .contract-file-aside-right{
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }
        .contract-file-aside-right .el-tabs__header {
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: #FFFFFF;
            padding: 0;
        }
        .contract-file-aside-right::-webkit-scrollbar {
            display: none;
            width: 8px;
        }

        .contract-file-aside-right::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .contract-file-aside-right::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        .contract-file-aside-right::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        .contract-file-aside-right .el-tabs__active-bar {
            margin-left: 15px;
        }
        .contract-file-aside-right .el-tabs__active-bar ~ #tab-addControl {
            margin-left: 15px;
        }
        .contract-file-aside-right .el-tabs__item.is-active {
            color: #0052D9 !important;
        }
        .contract-file-aside-right .el-tabs__active-bar {
            background-color: #0052D9 !important;
        }
        .contract-file-aside-right .el-collapse {
            border: none !important;
        }
        .contract-file-aside-right .el-collapse-item__header {
            border: none !important;
        }
        .contract-file-aside-right .right-tab-pane {
            font-size: 16px;
            padding-left: 15px;
            padding-right: 10px;
        }
        .contract-file-aside-right .right-tab-pane-drag-content {
            padding-left: 6px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;  /* 允许子元素换行 */
        }
        .right-tab-pane-drag-content .right-tab-pane-drag-content-item {
            width: 30%;
            height: 70px;
            background-color: #F0F8FF;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            word-wrap: break-word;
            word-break: break-word;
            padding: 5px 5px;
            box-sizing: border-box;
            user-select: none;
            cursor: grabbing;
            margin-bottom: 10px;
        }

        .el-radio-group {
            display: flex;
            flex-direction: column;
            gap: 20px; /* 控制单选框之间的间距 */
        }

        /* 单个 radio 项目 */
        .radio-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 使文本居左 */
        }

        /* 说明文本的样式 */
        .radio-description {
            margin-top: 8px;
            margin-left: 25px;
            font-size: 12px;
            color: #78818D;
        }
        .right-tab-pane .el-radio__inner {
            width: 18px !important;
            height: 18px !important;
        }




        .main-file-pane {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            height: 800px; /* 设置父容器的高度 */
            background-color: #f4f4f4;
            position: relative;
        }

        .a4-container {
            width: 210mm; /* A4纸的宽度 */
            height: 297mm; /* A4纸的高度 */
            background-color: white;
            padding: 10mm;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
            transform-origin: top center; /* 缩放时，缩放的原点为顶部居中 */
            transition: transform 0.3s ease;
            max-width: 100%;  /* 确保容器不会超出父容器宽度 */
            max-height: 100%; /* 确保容器不会超出父容器高度 */
        }

        /* 动态调整A4容器的缩放比例 */
        @media screen and (max-width: 1200px) {
            .a4-container {
                width: 80%;
                height: auto;
                transform: scale(0.7);
                transform-origin: top center;
            }
        }

        @media screen and (max-width: 900px) {
            .a4-container {
                width: 70%;
                height: auto;
                transform: scale(0.6);
            }
        }
    </style>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix addTemplate-card-header">
            <!--<div class="addTemplate-close" id="addTemplateClose">
                <svg t="1732843898972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4270" width="22" height="22"><path d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z" fill="#444444" p-id="4271"></path></svg>
                <span>
                    新建模板
                </span>
            </div>
            <div class="addTemplate-note">
                请确保所有文件都添加签署区
            </div>-->
            <div class="addTemplate-left">
                <div :class="{
                    'addTemplate-close-step2-margin':currentStep == 2,
                    'addTemplate-close':currentStep == 1 || currentStep == 3
                }" id="addTemplateClose">
                    <svg t="1732843898972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4270" width="22" height="22">
                        <path d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z" fill="#444444" p-id="4271"></path>
                    </svg>
                    <span>新建模板</span>
                </div>
                <div v-if="currentStep == 2" class="addTemplate-note">
                    <svg t="1734397949508" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4266" width="22" height="22"><path d="M512 170.666667C324.266667 170.666667 170.666667 324.266667 170.666667 512s153.6 341.333333 341.333333 341.333333 341.333333-153.6 341.333333-341.333333S699.733333 170.666667 512 170.666667z m0 640c-164.266667 0-298.666667-134.4-298.666667-298.666667s134.4-298.666667 298.666667-298.666667 298.666667 134.4 298.666667 298.666667-134.4 298.666667-298.666667 298.666667z" fill="#FA8C15" p-id="4267"></path><path d="M512 448c-12.8 0-21.333333 8.533333-21.333333 21.333333v213.333334c0 10.666667 8.533333 21.333333 21.333333 21.333333s21.333333-8.533333 21.333333-21.333333V469.333333c0-10.666667-8.533333-21.333333-21.333333-21.333333zM512 320c-12.8 0-21.333333 10.666667-21.333333 21.333333v42.666667c0 12.8 8.533333 21.333333 21.333333 21.333333s21.333333-10.666667 21.333333-21.333333v-42.666667c0-12.8-8.533333-21.333333-21.333333-21.333333z" fill="#FA8C15" p-id="4268"></path></svg>
                    <span>请确保所有文件都添加签署区</span>
                </div>
            </div>
            <div class="progress-container">
                <div class="step" id="stepOne" v-for="(item, index) in allSteps" :key="index">
                    <div v-if="item.state == 3" id="stepOneCircleDone" class="circle-done">
                        <svg t="1733983527863" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3065" width="20" height="20"><path d="M159.405 462.713l218.634 218.634L859.54 196.055l94.784 94.151-580.076 583.236L69.676 568.87l89.729-106.157z" p-id="3066" fill="#165DFF"></path></svg>
                    </div>
                    <div v-if="item.state != 3" id="stepOneCircle" :class="{
                        'circle': item.state == 1,
                        'circle-ing': item.state == 2,
                        'circle-done': item.state == 3
                    }">
                        {{ item.stepNum }}
                    </div>
                    <div id="stepOneText" :class="{
                        'text': item.state == 1,
                        'text-ing': item.state == 2,
                        'text-done': item.state == 3
                    }">{{ item.stepName }}</div>
                    <div :class="{
                        'separator-done' : item.state == 3,
                        'separator' : item.state == 1 || item.state == 2
                    }" id="stepOneDoneSeparator" v-if="item.stepNum != 3"></div>
                </div>
            </div>
            <div class="optionButtons">
                <el-button size="medium" @click="changeSteps('prev')" v-if="currentStep != 1">上一步</el-button>
                <el-button size="medium">保存草稿</el-button>
                <el-button size="medium" type="primary" @click="changeSteps('next')">下一步</el-button>
            </div>
        </div>
        <div class="stepOneWrapper" v-if="currentStep == 1">
            <el-form :model="templateForm" :rules="templateRules" ref="templateForm" label-width="110px" class="templateForms" size="medium">
                <el-form-item label="模板名称" prop="templateName" style="width: 40%">
                    <el-input v-model="templateForm.templateName"></el-input>
                </el-form-item>
                <el-form-item label="合同类型" prop="contractType">
                    <el-checkbox-group v-model="templateForm.contractType">
                        <el-checkbox label="合作合同" name="contractType"></el-checkbox>
                        <el-checkbox label="入围合同" name="contractType"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="合同等级" prop="contractLevel">
                    <el-checkbox-group v-model="templateForm.contractLevel">
                        <el-checkbox label="新合同" name="contractLevel"></el-checkbox>
                        <el-checkbox label="补充协议" name="contractLevel"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="签署对象类型" prop="signObjectType">
                    <el-checkbox-group v-model="templateForm.signObjectType">
                        <el-row>
                            <el-checkbox label="社会渠道" name="signObjectType"></el-checkbox>
                            <el-checkbox label="加盟店" name="signObjectType"></el-checkbox>
                            <el-checkbox label="直营店合作方" name="signObjectType"></el-checkbox>
                        </el-row>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="模板说明" prop="templateDesc" style="width: 45%">
                    <el-input :autosize="{ minRows: 6, maxRows: 8}" type="textarea" v-model="templateForm.templateDesc"></el-input>
                </el-form-item>
                <el-form-item label="合同文件" prop="contractFiles" style="width: 45%">
                    <el-upload class="upload-demo" 
                        :action="uploadUrl" 
                        :before-upload="beforeUpload"
                        :on-change="handleChange"
                        :file-list="fileList"
                        :show-file-list="true"
                        :limit="10"
                        :on-success="handleSuccess"
                        :on-error="handleError"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>

                <!--<el-form-item>
                    <el-button type="primary"  @click="submitForm('templateForm')">立即创建</el-button>
                    <el-button @click="resetForm('templateForm')">重置</el-button>
                </el-form-item>-->
            </el-form>
        </div>
        <!-- 第二步编辑 -->
        <div v-if="currentStep == 2" style="">
            <el-container style="height: 800px;">
                <!-- 左侧附件列表 -->
                <el-aside class="contract-file-aside-left">
                    <div class="contract-file-name-list">
                        <div class="contract-file-name-list-title">
                            文件列表:
                        </div>
                        <div class="contract-file-name-list-content">
                            <span v-for="(item,index) in contractFileList" :key="index">
                                <el-tooltip v-if="item.name.length > 16" class="item" effect="dark" :content="item.name" placement="right-start">
                                    <div :class="{
                                        'contract-file-name-list-content-name-active': item.checked,
                                        'contract-file-name-list-content-name': !item.checked,
                                    }" @click="switchContractFileName(item,index)">
                                        {{ item.name.length > 16 ? item.name.slice(0,16) + '...' : item.name }}
                                    </div>
                                </el-tooltip>
                                <div v-else :class="{
                                        'contract-file-name-list-content-name-active':item.checked,
                                        'contract-file-name-list-content-name': !item.checked,
                                    }" @click="switchContractFileName(item,index)">
                                        {{ item.name }}
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 合同缩略图列表 -->
                    <div class="contract-file-small-list" v-if="choosedContractFile">
                        <el-tooltip v-if="choosedContractFile && choosedContractFile.name && choosedContractFile.name.length > 16" class="item" effect="dark" :content="choosedContractFile.name" placement="right-start">
                        <div class="contract-file-small-list-title">
                            {{ choosedContractFile.name.length > 16 ? choosedContractFile.name.slice(0,16) + '...' : choosedContractFile.name}}
                        </div>
                        </el-tooltip>
                        <div class="contract-file-small-list-title" v-else>
                            {{ choosedContractFile.name}}
                        </div>
                        <div class="contract-file-small-list-content">
                            <div class="contract-file-small-list-content-item-wrapper" v-for="(page,pageIndex) in choosedContractFile.pages" :key="pageIndex">
                                <div class="contract-file-small-list-content-item">
                                    <div @click="changeContractFileSmall(page,pageIndex)" :class="{
                                        'contract-file-small-list-content-item-left': !page.checked,
                                        'contract-file-small-list-content-item-left-active': page.checked
                                    }">
                                        <!-- 左侧文件缩略图内容 -->
                                    </div>
                                    <div class="contract-file-small-list-content-item-right">
                                        <span v-for="(control,controlIndex) in choosedContractFile.controls" :key="controlIndex">
                                            <el-tooltip v-if="control.name && control.name.length > 6" class="item" effect="dark" :content="control.name" placement="right-start">
                                                <div :class="{
                                                    'contract-file-small-list-content-item-right-item': !page.checked,
                                                    'contract-file-small-list-content-item-right-item-active': page.checked
                                                }">
                                                    {{ control.name.length > 6 ? control.name.slice(0,6) + '...' : control.name}}
                                                    <span v-if="page.checked" @click="switchContractControls(control,controlIndex)" class="contract-file-small-list-content-item-right-item-close">
                                                        <svg t="1734425356270" class="contract-file-small-list-content-item-right-item-close-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3119" width="16" height="16"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM512 96a416 416 0 1 0 0 832 416 416 0 0 0 0-832z m176 640a47.68 47.68 0 0 1-33.92-14.08L512 579.904 369.92 721.92a48 48 0 0 1-67.84-67.84L444.096 512 302.08 369.92a48 48 0 0 1 67.84-67.84L512 444.096l142.08-142.016a48 48 0 0 1 67.84 67.84L579.904 512l142.016 142.08a48 48 0 0 1-33.92 81.92z" fill="#515151" p-id="3120"></path></svg>
                                                    </span>
                                                </div>
                                            </el-tooltip>
                                            <div v-else :class="{
                                                    'contract-file-small-list-content-item-right-item': !page.checked,
                                                    'contract-file-small-list-content-item-right-item-active': page.checked
                                                }">
                                                    {{control.name}}
                                                    <span v-if="page.checked" @click="switchContractControls(control,controlIndex)" class="contract-file-small-list-content-item-right-item-close">
                                                        <svg t="1734425356270" class="contract-file-small-list-content-item-right-item-close-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3119" width="16" height="16"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM512 96a416 416 0 1 0 0 832 416 416 0 0 0 0-832z m176 640a47.68 47.68 0 0 1-33.92-14.08L512 579.904 369.92 721.92a48 48 0 0 1-67.84-67.84L444.096 512 302.08 369.92a48 48 0 0 1 67.84-67.84L512 444.096l142.08-142.016a48 48 0 0 1 67.84 67.84L579.904 512l142.016 142.08a48 48 0 0 1-33.92 81.92z" fill="#515151" p-id="3120"></path></svg>
                                                    </span>
                                                </div>
                                        </span>
                                    </div>
                                </div>
                                <div :class="{
                                        'contract-file-small-list-content-item-page': !page.checked,
                                        'contract-file-small-list-content-item-page-active': page.checked
                                    }">
                                    {{ pageIndex+1 }}/{{ choosedContractFile.pages.length }}
                                </div>
                            </div>
                        </div>
                    </div>

                </el-aside>

                <el-main class="main-file-pane">
                    <div class="a4-container">

                    </div>
                </el-main>

                <el-aside class="contract-file-aside-right">
                    <el-tabs v-model="rightControlsAreaActive" @tab-click="handleRightControlsAreaActive">
                        <el-tab-pane label="添加组件" name="addControl" class="right-tab-pane">
                            <el-collapse v-model="rightControlsAreaCollapse" @change="handleRightControlsAreaCollapse">
                                <el-collapse-item v-for="(title, titleIndex) in rightControlsContentList" :key="titleIndex" :name="title.code">
                                    <template #title>
                                        <svg t="1734521487306" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6183" width="16" height="18"><path d="M512 26.56a116.544 116.544 0 0 0-116.512 116.512V880.96a116.512 116.512 0 0 0 233.024 0V143.072A116.544 116.544 0 0 0 512 26.56z" fill="#0052D9" p-id="6184"></path></svg>
                                        <span style="font-weight: bold;font-size: 14px;">{{title.name}}</span>
                                    </template>
                                    <div class="right-tab-pane-drag-content">
                                        <div class="right-tab-pane-drag-content-item" v-for="(content,contentIndex) in title.subContent" :key="contentIndex">
                                            {{ content.name }}
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-tab-pane>
                        <el-tab-pane label="添加水印" name="addWaterMark" class="right-tab-pane">
                            <el-form label-position="top" label-width="80px" :model="rightWaterMarker">
                                <el-form-item label="水印信息" style="--el-form-item-label-color: #78818D;">
                                    <el-radio-group v-model="rightWaterMarker.waterMarkerInfo">
                                        <!-- 纵向排列的 Radio -->
                                        <div class="radio-item">
                                            <el-radio label="none" >无水印</el-radio>
                                        </div>
                                        <div class="radio-item">
                                            <el-radio label="visitor">访问者信息</el-radio>
                                            <div class="radio-description" aria-describedby="radio-description-diy">在线查看合同时会显示访问者姓名和手机尾号</div>
                                        </div>
                                        <div class="radio-item">
                                            <el-radio label="diy">自定义内容</el-radio>
                                            <div class="radio-description" aria-describedby="radio-description-diy">在线查看和下载的合同会显示自定义的水印内容</div>
                                        </div>
                                    </el-radio-group>
                                </el-form-item>

                                <el-form-item v-if="rightWaterMarker.waterMarkerInfo == 'diy'">
                                    <template #label>
                                        <span style="color: #78818D;">文字内容<span style="color:red;">*</span></span>
                                    </template>
                                    <el-input maxlength="15" show-word-limit v-model="rightWaterMarker.waterMarkerText"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-aside>
            </el-container>
        </div>
        <!-- 第三步-预览 -->
        <div v-if="currentStep == 3" style="">
            <el-container style="height: 800px;">
                <!-- 左侧附件列表 -->
                <el-aside class="contract-file-aside-left">
                    <div class="contract-file-name-list">
                        <div class="contract-file-name-list-title">
                            文件列表:
                        </div>
                        <div class="contract-file-name-list-content">
                            <span v-for="(item,index) in contractFileList" :key="index">
                                <el-tooltip v-if="item.name.length > 16" class="item" effect="dark" :content="item.name" placement="right-start">
                                    <div :class="{
                                        'contract-file-name-list-content-name-active': item.checked,
                                        'contract-file-name-list-content-name': !item.checked,
                                    }" @click="switchContractFileName(item,index)">
                                        {{ item.name.length > 16 ? item.name.slice(0,16) + '...' : item.name }}
                                    </div>
                                </el-tooltip>
                                <div v-else :class="{
                                        'contract-file-name-list-content-name-active':item.checked,
                                        'contract-file-name-list-content-name': !item.checked,
                                    }" @click="switchContractFileName(item,index)">
                                        {{ item.name }}
                                </div>
                            </span>
                        </div>
                    </div>
                    <!-- 合同缩略图列表 -->
                    <div class="contract-file-small-list" v-if="choosedContractFile">
                        <el-tooltip v-if="choosedContractFile && choosedContractFile.name && choosedContractFile.name.length > 16" class="item" effect="dark" :content="choosedContractFile.name" placement="right-start">
                            <div class="contract-file-small-list-title">
                                {{ choosedContractFile.name.length > 16 ? choosedContractFile.name.slice(0,16) + '...' : choosedContractFile.name}}
                            </div>
                        </el-tooltip>
                        <div class="contract-file-small-list-title" v-else>
                            {{ choosedContractFile.name}}
                        </div>
                        <div class="contract-file-small-list-content">
                            <div class="contract-file-small-list-content-item-wrapper" v-for="(page,pageIndex) in choosedContractFile.pages" :key="pageIndex">
                                <div class="contract-file-small-list-content-item">
                                    <div @click="changeContractFileSmall(page,pageIndex)" :class="{
                                        'contract-file-small-list-content-item-left': !page.checked,
                                        'contract-file-small-list-content-item-left-active': page.checked
                                    }">
                                        <!-- 左侧文件缩略图内容 -->
                                    </div>
                                    <div class="contract-file-small-list-content-item-right">
                                        <span v-for="(control,controlIndex) in choosedContractFile.controls" :key="controlIndex">
                                            <el-tooltip v-if="control.name && control.name.length > 6" class="item" effect="dark" :content="control.name" placement="right-start">
                                                <div :class="{
                                                    'contract-file-small-list-content-item-right-item': !page.checked,
                                                    'contract-file-small-list-content-item-right-item-active': page.checked
                                                }">
                                                    {{ control.name.length > 6 ? control.name.slice(0,6) + '...' : control.name}}
                                                    <span v-if="page.checked  && currentStep != 3" @click="switchContractControls(control,controlIndex)" class="contract-file-small-list-content-item-right-item-close">
                                                        <svg t="1734425356270" class="contract-file-small-list-content-item-right-item-close-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3119" width="16" height="16"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM512 96a416 416 0 1 0 0 832 416 416 0 0 0 0-832z m176 640a47.68 47.68 0 0 1-33.92-14.08L512 579.904 369.92 721.92a48 48 0 0 1-67.84-67.84L444.096 512 302.08 369.92a48 48 0 0 1 67.84-67.84L512 444.096l142.08-142.016a48 48 0 0 1 67.84 67.84L579.904 512l142.016 142.08a48 48 0 0 1-33.92 81.92z" fill="#515151" p-id="3120"></path></svg>
                                                    </span>
                                                </div>
                                            </el-tooltip>
                                            <div v-else :class="{
                                                    'contract-file-small-list-content-item-right-item': !page.checked,
                                                    'contract-file-small-list-content-item-right-item-active': page.checked
                                                }">
                                                    {{control.name}}
                                                    <span v-if="page.checked && currentStep != 3" @click="switchContractControls(control,controlIndex)" class="contract-file-small-list-content-item-right-item-close">
                                                        <svg t="1734425356270" class="contract-file-small-list-content-item-right-item-close-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3119" width="16" height="16"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM512 96a416 416 0 1 0 0 832 416 416 0 0 0 0-832z m176 640a47.68 47.68 0 0 1-33.92-14.08L512 579.904 369.92 721.92a48 48 0 0 1-67.84-67.84L444.096 512 302.08 369.92a48 48 0 0 1 67.84-67.84L512 444.096l142.08-142.016a48 48 0 0 1 67.84 67.84L579.904 512l142.016 142.08a48 48 0 0 1-33.92 81.92z" fill="#515151" p-id="3120"></path></svg>
                                                    </span>
                                                </div>
                                        </span>
                                    </div>
                                </div>
                                <div :class="{
                                        'contract-file-small-list-content-item-page': !page.checked,
                                        'contract-file-small-list-content-item-page-active': page.checked
                                    }">
                                    {{ pageIndex+1 }}/{{ choosedContractFile.pages.length }}
                                </div>
                            </div>
                        </div>
                    </div>

                </el-aside>

                <el-main style="background-color: #3F51B5;">
                </el-main>

                <el-aside class="contract-file-aside-right">
                </el-aside>
            </el-container>
        </div>
    </el-card>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    /// <reference path="js/vue.d.ts" />
</script>
<script>
    /// <reference lib="dom" />
    /// <reference lib="ESNext" />
    /// <reference path="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js" />
</script>
<!-- element-ui 2.15.14 -->
<script src="js/index.js"></script>
<!-- axios@1.7.9 -->
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                allSteps:[
                    {
                        stepNum: 1,
                        stepName: '填写基本信息',
                        /*state:1-灰色-未执行到 2-蓝色-正在执行 3-蓝色-执行完毕*/
                        state:2,
                    },
                    {
                        stepNum: 2,
                        stepName: '文件添加填写区/签署区',
                        state:1
                    },
                    {
                        stepNum: 3,
                        stepName: '预览',
                        state: 1
                    }
                ],
                currentStep:1,
                templateForm:{
                    templateName:'',
                    contractType:[],
                    contractLevel:[],
                    signObjectType:[],
                    templateDesc:'',
                    contractFiles:[]
                },
                templateRules: {
                    templateName: [
                        { required: true, message: '请输入模板名称', trigger: 'blur' },
                        { min: 1, max: 300, message: '模板名称不能超过300字', trigger: 'blur' }
                    ],
                    contractType: [
                        { type: 'array', required: true, message: '请至少选择一个合同类型', trigger: 'change' }
                    ],
                    contractLevel: [
                        { type: 'array', required: true, message: '请至少选择一个合同等级', trigger: 'change' }
                    ],
                    signObjectType: [
                        { type: 'array', required: true, message: '请至少选择一个签署对象类型', trigger: 'change' }
                    ],
                    templateDesc: [
                        /*{ required: true, message: '请填写活动形式', trigger: 'blur' },*/
                        { max: 500, message: '模板名称不能超过500字', trigger: 'blur' }
                    ]
                },
                //上传的文件列表
                fileList: [{
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }, {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }],
                uploadUrl: '/mock-upload', // Mock 上传接口
                // 签署区的文件列表 控件
                contractFileList:[
                    {id:0,name:'合同附件0',content:'html0',pages:[{id:1,content:'1'},{id:2,content:'2'}],controls:[{id:1,name:'测试控件甲方公司名称1'},{id:2,name:'测试控件甲方公司名称2'},{id:3,name:'控件3'}]},
                    {id:1,name:'合同附件1合同附件1合同附件1合同附件1合同附件1',content:'html1',pages:[{id:1,content:'1'},{id:2,content:'2'},{id:3,content:'3'},{id:4,content:'4'}],controls:[{id:1,name:'测试控件甲方公司名称1'},{id:2,name:'测试控件甲方公司名称2'},{id:3,name:'控件3'},{id:4,name:'控件4'},{id:5,name:'控件5'},{id:6,name:'控件6'}]},
                    {id:2,name:'合同附件2',content:'html2',pages:[{id:1,content:'1'},{id:2,content:'2'}],controls:[{id:1,name:'测试控件甲方公司名称1'},{id:2,name:'测试控件甲方公司名称2'},{id:3,name:'控件3'}]},
                    {id:3,name:'合同附件3',content:'html3',pages:[{id:1,content:'1'},{id:2,content:'2'},{id:3,content:'3'}],controls:[{id:1,name:'测试控件甲方公司名称1'},{id:2,name:'测试控件甲方公司名称2'},{id:3,name:'控件3'}]},
                    {id:4,name:'合同附件4',content:'html4',pages:[{id:1,content:'1'}],controls:[{id:1,name:'测试控件甲方公司名称1'},{id:2,name:'测试控件甲方公司名称2'},{id:3,name:'控件3'}]},
                    {id:5,name:'合同附件5',content:'html5',pages:[{id:1,content:'1'},{id:2,content:'2'},{id:4,content:'4'}],controls:[{id:1,name:'测试控件甲方公司名称1'},{id:2,name:'测试控件甲方公司名称2'},{id:3,name:'控件3'}]},
                    {id:6,name:'合同附件6',content:'html6',pages:[{id:1,content:'1'},{id:4,content:'4'}],controls:[{id:1,name:'测试控件甲方公司名称1'},{id:2,name:'测试控件甲方公司名称2'},{id:3,name:'控件3'}]},
                ],
                choosedContractFile:undefined,
                choosedContractFileIndex:undefined,

                rightControlsAreaActive:'addControl',
                rightControlsAreaCollapse:[],

                rightControlsContentList:[
                    {pid:0,id:1,name:'渠道信息',code:'channelInfo',subContent:[{pid:1,id:1,name:'渠道编码',code:'channelCode'},{pid:1,id:2,name:'渠道名称',code:'channelName'},{pid:1,id:3,name:'渠道地址',code:'channelAddress'}]},
                    {pid:0,id:2,name:'合作商信息',code:'partnerInfo',subContent:[{pid:2,id:1,name:'企业全称',code:'partnerName'},{pid:1,id:2,name:'统一社会信用代码',code:'agentSocialCreditNum'},{pid:1,id:3,name:'法人/经营者姓名',code:'agentLegalPerson'},{pid:1,id:4,name:'法人/经营者手机号',code:'agentLegalPersonPhone'},{pid:1,id:5,name:'法人/经营者证件类型',code:'agentPaperType'},{pid:1,id:6,name:'法人/经营者证件号码',code:'agentPaperNum'}]},
                    {pid:0,id:3,name:'银行信息',code:'bankInfo',subContent:[{pid:3,id:1,name:'银联号',code:'bankUnionCode'},{pid:3,id:2,name:'网点名称',code:'branchBankName'},{pid:3,id:3,name:'开户行名称',code:'bankName'},{pid:3,id:4,name:'银行账户',code:'acctNo'},{pid:3,id:5,name:'银行户名',code:'acctName'},{pid:3,id:6,name:'费用短信号码',code:'acctSmsPhone'},{pid:3,id:7,name:'供应商名称',code:'supplier'}]},
                    {pid:0,id:4,name:'合同有效期',code:'contractExpireDate',subContent:[{pid:4,id:1,name:'合同履行期限',code:'channelCode'}]},
                    {pid:0,id:5,name:'签署区',code:'signArea',subContent:[{pid:5,id:1,name:'个人签名',code:'personSign'},{pid:5,id:2,name:'甲方企业印章',code:'jiaSeal'},{pid:5,id:3,name:'乙方企业印章',code:'yiSeal'},{pid:5,id:4,name:'骑缝章',code:'sewingSeal'}]},
                ],

                rightWaterMarker:{
                  waterMarkerInfo:'none',
                  waterMarkerText:undefined,
                },
            }
        },
        methods: {
            hello (){
                console.log('hello')
            },
            changeSteps (type){
                if (type == 'next') {

                    if (this.currentStep == 2) {
                        if (this.rightWaterMarker.waterMarkerInfo == 'diy' && !this.rightWaterMarker.waterMarkerText) {
                            this.$message({
                                message: '您选择了自定义水印，请填写自定义水印内容!',
                                type: 'error',
                                duration: 5000,
                                //showClose: true,
                            });
                            return false;
                        }
                    }

                    if (this.ccurrentStep >= 3) return false;
                    this.currentStep++;
                    /*this.$refs['templateForm'].validate((valid) => {
                        if (!valid) {
                            alert('error submit!');
                            console.log('error submit!!');
                            return false;
                        }
                        this.currentStep++;

                        const steps = this.allSteps;
                        if (this.currentStep === 1) {
                            steps[0].state = 2;
                            steps[1].state = 1;
                            steps[2].state = 1;
                        } else if (this.currentStep === 2) {
                            steps[0].state = 3;
                            steps[1].state = 2;
                            steps[2].state = 1;
                        } else if (this.currentStep === 3) {
                            steps[0].state = 3;
                            steps[1].state = 3;
                            steps[2].state = 2;
                        }
                    });*/
                } else if(type == 'prev') {
                    if (this.ccurrentStep <= 1) return false;
                    this.currentStep--;
                } else {
                    this.currentStep = type;
                }
                const steps = this.allSteps;
                if (this.currentStep === 1) {
                    steps[0].state = 2;
                    steps[1].state = 1;
                    steps[2].state = 1;
                } else if (this.currentStep === 2) {
                    steps[0].state = 3;
                    steps[1].state = 2;
                    steps[2].state = 1;
                } else if (this.currentStep === 3) {
                    steps[0].state = 3;
                    steps[1].state = 3;
                    steps[2].state = 2;
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleChange(file, fileList) {
                //this.fileList = fileList.slice(-3);
            },
            beforeUpload(file) {
                const isWord = /\.(docx?|pdf)$/.test(file.name);
                if (!isWord) {
                    this.$message.error('只能上传 Word 或 PDF 文件');
                    return false; // 取消上传
                }
                const isLt10M = file.size / 1024 / 1024 < 10;
                if (!isLt10M) {
                    this.$message.error('文件大小不能超过 10MB');
                    return false; // 取消上传
                }

                // 使用模拟上传接口
                mockUpload(file)
                    .then((response) => {
                        console.log('上传成功:', response);
                        file.status = 'success';
                        file.url = response.link;
                        this.fileList.push({name:file.name,url:file.url})
                    })
                    .catch((error) => {
                        console.log('上传失败:', error);
                        file.status = 'failed';
                    });

                // 返回 false 阻止自动上传行为，已在 mockUpload 中手动上传
                return false;
            },
            // 文件上传成功后处理
            handleSuccess(response, file, fileList) {
                console.log('上传成功', response);
                // 保持上传文件的状态，确保文件仍然在列表中
                file.status = 'success'; // 设置上传成功状态
                file.url = response.link; // 假设响应中返回了文件链接
            },

            // 文件上传失败处理
            handleError(err, file, fileList) {
                console.error('上传失败', err);
                file.status = 'failed'; // 设置上传失败状态
            },

            //签署区域 点击左侧文件列表名称显示文件缩略图
            switchContractFileName(item,index) {
                if (!item.checked) {
                    this.contractFileList.forEach(file => {
                        file.checked = false;
                    });
                    item.checked = true;
                } else {
                    item.checked = false; // 如果点击的已经是选中的项，则取消选中
                }
                console.log('显示文件缩略：：：',item)
                this.choosedContractFile = item;
                this.choosedContractFileIndex = index;
            },
            changeContractFileSmall(page,pageIndex) {
                console.log('点击缩略图：：',page,pageIndex)
                let contract = this.contractFileList[this.choosedContractFileIndex];
                if (contract) {
                    // 遍历该合同附件下的所有页面，设置 checked 为 false
                    contract.pages.forEach(page => {
                        page.checked = false; // 先将所有页面的 checked 设置为 false
                    });

                    // 找到选中的页面并设置其 checked 为 true
                    let selectedPage = contract.pages[pageIndex];
                    if (selectedPage) {
                        selectedPage.checked = true;
                        console.log(`合同附件 ${this.choosedContractFileIndex} 的页面 ${pageIndex} 被选中，checked 状态：`, selectedPage.checked);
                    }
                    this.choosedContractFile = undefined;
                    this.choosedContractFile = contract;
                }
            },
            switchContractControls(control,controlIndex) {
                console.log(`点击删除控件的x号，合同附件的下标为：${this.choosedContractFileIndex},控件的下标为：${controlIndex}，控件内容为：${JSON.stringify(control)}`)
            },

            handleRightControlsAreaActive(tab, event) {
                console.log(tab, event);
                console.log(this.rightControlsAreaActive)
            },
            handleRightControlsAreaCollapse(val) {
                console.log(val);
            },
        },
        created: function () {
            //todo: 接口对完后都要写到对应的请求下
            //默认选中左侧的文件名和文件缩略图
            this.contractFileList.forEach(item => {
                item.checked = false; // 初始值为 false
                item.pages.forEach(page => {
                    page.checked = false;
                })
                item.pages[0].checked = true;
            });
            this.contractFileList[0].checked = true;
            this.choosedContractFile = this.contractFileList[0];
            this.choosedContractFileIndex = 0;

            //默认打开右侧的collapse
            this.rightControlsContentList.forEach(item=>{
                this.rightControlsAreaCollapse.push(item.code)
            })

            console.log('created触发！')
            this.hello();
            this.changeSteps(2)
        },
        mounted: function () {
            console.log('mounted触发！')
        },
        computed: {
        }
    })
</script>
<script>
    // 模拟上传接口
    function mockUpload(file) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (Math.random() > 0.1) { // 模拟 90% 的上传成功率
            resolve({
              status: 'success',
              link: `http://example.com/uploads/${file.name}`,
            });
          } else {
            reject({
              status: 'failed',
              message: '上传失败',
            });
          }
        }, 2000); // 模拟 2 秒钟上传时间
      });
    }

    // 覆盖 uploadUrl 的请求
    Vue.prototype.$mockUpload = mockUpload;
  </script>
</html>